<template>
  <div class="content-card">
    <img :src="section.image" :alt="section.title" class="card-image">
    <div class="card-content">
      <h3 class="card-title">{{ section.title }}</h3>
      <p class="card-text">{{ section.description }}</p>
      <a href="javascript:void(0)" @click="navigateToSection" class="card-button">了解更多</a>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  name: 'ContentCard',
  props: {
    section: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const router = useRouter()
    const { section } = props
    
    const getRoutePath = (title) => {
      const routeMap = {
        '地方文化': '/history',
        '景点预约': '/site',
        '美食': '/food',
        '留言板': '/message'
      }
      return routeMap[title] || '/'
    }
    
    const navigateToSection = () => {
      const path = getRoutePath(section.title)
      router.push(path)
      // 确保页面跳转后滚动到顶部
      window.scrollTo(0, 0)
    }
    
    return {
      getRoutePath,
      navigateToSection
    }
  }
}
</script>

<style scoped>
.content-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.content-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 20px;
}

.card-title {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.card-text {
  color: #666;
  margin-bottom: 15px;
}

.card-button {
  display: inline-block;
  background: var(--primary-color);
  color: white;
  padding: 8px 15px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s;
}

.card-button:hover {
  background: var(--secondary-color);
}
</style>